<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            font-family: "黑体",serif;
        }
        h1{
            color: red;
        }
        .class_selector{
            color: blue;
        }
        #id_selector{
            color: green;
        }
        input[type=text][name|=attr]{
            color: slategray;
            font-size: 16px;
        }
        div h6{
            color: #f317f3;
        }
        .sc_class1 .sc_class11{
            color: #0e27f8;
        }
        div>h5{
            color: #17b6f3;
        }
    </style>
</head>
<body>
    <h1>标签选择器，红色文本</h1>
    <h2 class="class_selector">类选择器，蓝色文本</h2>
    <h3 id="id_selector">id选择器，绿色文本</h3>
    <label>
        <input type="text" name="attr" value="属性选择器">
    </label>
    <div>
        <h6>元素包含选择器，儿子匹配</h6>
        <a>
            <h6>元素包含选择器，孙子匹配</h6>
        </a>
    </div>
    <div class="sc_class1">
        <h6 class="sc_class11">类包含选择器，儿子匹配</h6>
        <a>
            <h6 class="sc_class11">类包含选择器，孙子匹配</h6>
        </a>
    </div>
    <div>
        <h5>子选择器，儿子匹配</h5>
        <a>
            <h5>子选择器，孙子不匹配</h5>
        </a>
    </div>
</body>
</html>
